function initContainerSize() {
  var BASE_WIDTH = 1920;
  var BASE_HEIGHT = 1080;
  var windowHeight = document.body.clientHeight;
  var windowWidth = document.body.clientWidth;
  var myCanvas = {}
  if ((windowWidth / windowHeight) > (BASE_WIDTH / BASE_HEIGHT)) {
    window.ratio = windowHeight / BASE_HEIGHT;
    myCanvas.Width = windowHeight * BASE_WIDTH / BASE_HEIGHT;
    myCanvas.Height = windowHeight;
    myCanvas.Top = (windowHeight - myCanvas.Height) / 2;
    myCanvas.Left = (windowWidth - myCanvas.Width) / 2;
  } else {
    window.ratio = windowWidth / BASE_WIDTH;
    myCanvas.Width = windowWidth;
    myCanvas.Height = windowWidth * BASE_HEIGHT / BASE_WIDTH;
    myCanvas.Top = (windowHeight - myCanvas.Height) / 2;
    myCanvas.Left = (windowWidth - myCanvas.Width) / 2;
  }
  $('#main').css({
    width: myCanvas.Width,
    height: myCanvas.Height,
    left: '50%',
    top: '50%',
    'margin-left': -myCanvas.Width / 2,
    'margin-top': -myCanvas.Height / 2,
    position: 'absolute'
  });
  $('#cnt').css({
    '-webkit-transform': 'scale(' + window.ratio + ')',
    '-moz-transform': 'scale(' + window.ratio + ')',
    '-ms-transform': 'scale(' + window.ratio + ')',
    '-o-transform': 'scale(' + window.ratio + ')',
    'transform': 'scale(' + window.ratio + ')'
  });
}

window.onresize = function () {
  initContainerSize();
}

initContainerSize();
